/* ------------------------------------------------------------------------------
*
*  # Bootstrap Duallistbox
*
*  Styles for listbox.js - A responsive dual listbox widget optimized for Bootstrap
*
*  Version: 1.2
*  Latest update: Aug 10, 2016
*
* ---------------------------------------------------------------------------- */


// Core
// ------------------------------

.bootstrap-duallistbox-container {

    //
    // Layout
    //

    // Add bottom spacing to the first box
    .box1 {
        margin-bottom: @line-height-computed;
    }

    // Select
    select.form-control {
        padding: @list-spacing;
        .border-top-radius(0);
    }
    option {
        display: block;
        padding: @padding-base-vertical @padding-base-horizontal;
        border-radius: @border-radius-small;
    }

    // Move option on select
    &.moveonselect {

        // Hide "Move single" button
        .move,
        .remove {
            display: none;
        }

        // Visible buttons
        .moveall,
        .removeall {
            width: 100%;
            .border-top-radius(@border-radius-base)!important;
        }

        // Add border to the next buttons
        .btn-group {
            .btn + .btn {
                border-left-width: 1px;
            }
        }
    }


    //
    // Buttons
    //

    // Main buttons
    .buttons {
        width: 100%;
        margin-bottom: -1px;
    }

    // Clear buttons
    .clear1,
    .clear2 {
        display: none;
        margin-top: @line-height-computed;

        // Reset styles
        &,
        &:hover,
        &:focus {
            background-color: transparent;
            border: 0;
            color: @link-color;
            padding: 0;
            .box-shadow(none);
        }
    }
    .box1.filtered .clear1,
    .box2.filtered .clear2 {
        display: inline-block;
    }

    // Control buttons
    .move,
    .remove,
    .moveall,
    .removeall {
        width: 50%;
    }

    // Button group
    .btn-group .btn {
        margin: 0;
        .border-bottom-radius(0);

        // Borders
        & + .btn {
            border-left-width: 0;
        }

        // Icons
        > i {
            float: none;
            text-align: center;

            // Reduce spacing between icons
            + i {
                margin-left: -14px;
            }
        }
    }


    //
    // Elements
    //

    // Filter
    .filter {
        margin-bottom: @line-height-computed;
        position: relative;

        &.placeholder {
            color: @input-color-placeholder;
        }
    }

    // Bottom info
    .info-container {
        .info {
            display: inline-block;
            margin-top: @line-height-computed;

            .label {
                margin-right: @element-horizontal-spacing;
            }
        }
    }


    //
    // Inside sidebar
    //

    .sidebar & {
        text-align: center;

        .box1,
        .box2 {
            float: none;
            width: 100%;
        }

        .box1 {
            padding-bottom: 5px;

            &:after {
                content: '\e9c9';
                font-size: @icon-font-size;
                font-family: 'icomoon';
                display: block;
                text-align: center;
                line-height: 1;
                margin: 10px 0;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                .opacity(0.5);
            }
        }
    }


    //
    // Responsive stuff
    //

    @media (min-width: @screen-md) {
        .box1 {
            margin-bottom: 0;
        }

        .sidebar & {
            .box1 {
                margin-bottom: 0;
            }
        }
    }
}
